<template>
<!-- 模态框 -->
  <div class="modal">
    <!-- 遮罩层 -->
    <div class="mask" @click="changeIsShowLoginModal(false)">
    </div>
    <!-- 登录框 -->
        <div class="loginbox" >
            <div class="close"  @click="changeIsShowLoginModal(false)"></div>
            <nav class="nav">
                <a href="javascript:" :class="{active:isShowPhoneLogin}" @click="isShowPhoneLogin = true">手机号码登录</a>|
                <a href="javascript:" :class="{active:!isShowPhoneLogin}" @click="isShowPhoneLogin = false">微信扫码登录</a>
            </nav>
            <div class="content">
                <div class="phoneLogin" v-show="isShowPhoneLogin">
                <!-- 手机号登录 -->
                <div class="row">
                    <input type="text" placeholder="请输入手机号" v-model="phoneNumber"/>
                </div>
                <div class="row">
                    <slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg" :imgs="imgs"></slide-verify>
                </div>
                <div class="row">
                    <input type="text" placeholder="请输入短信验证码">
                    <button class="btn btncode" @click="getCode" v-show="!isShowCount">获取验证码</button>
                    <button class="btn btncode"  v-show="isShowCount">{{count+"s"}}</button>
                </div>
                <div class="row">
                    <button class="btn btnlogin" @click="submitFn" >{{msg}}登录</button>
                </div>
                </div>

                <div class="wxLogin" v-show="!isShowPhoneLogin">
                    <!-- 微信登录 -->
                    微信登录
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
    data(){
        return {
            // 是否显示手机号登录框
            isShowPhoneLogin:true,
            msg:"向右滑动",
            // 滑块图片数组
            imgs: [
                require("../assets/img/integral-01.9386d4bf.png"),
                require("../assets/img/integral-02.150d92a1.png"),
                require("../assets/img/integral-03.9870f3f1.png"),
            ],
            phoneNumber:'',
            // 倒计时数字
            count:5,
            // 是否显示倒计时数字
            isShowCount:false
        }
    },
    methods:{
        ...mapMutations({
            changeIsShowLoginModal:"showModal/changeIsShowLoginModal"
        }),
        // 拼图成功
        onSuccess(times) {
        let ms = (times / 1000).toFixed(1);
        this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
        this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
        this.msg = "再试一次";
        },
        // 获取验证码
        getCode() {
      //^ 以...开头
      //$ 以...结尾
      //| 或者
      // [0-9] 0~9任意一个数字
      // [123] 1,2,3中任意一个
      // \d 等同于 [0-9]
      // {n} 匹配n次
      // 139  55556666
      //test(要验证的字符串) 符合true 不符合false
      // 1 判断手机号,是否输入正确,不正确,提示
    //   let reg = /^(13[0-9]|14[01456789]15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    //     if (!reg.test(this.phoneNumber)){
    //         alert("请输入正确的手机号码")
    //         return;
    //     }
    //     console.log("验证通过");
    //     // 2判断滑块验证码是否输入正确,不正确,提示
    //     if(this.msg=="向右活动"||this.msg=="再试一次") {
    //             alert("请重新滑块验证码")
    //             return;
    //         }
        // 3开始获取验证码(请求后台发送验证码),发送成功后,进行倒计时功能
        // 倒计时功能---循环 setInterval()递减一个数字 count
        /* 
            1 api.js 编写接口 (查看接口文档)
            2 组件内调用接口方法 发送短信验证码
            let res  = await SendSMSAPI({
                phone:this.phoneNumber,
            })
            验证:出现500
            3. 对参数使用qs.stringify()
            验证：记得输入手机号码  成功了  

            接口排错方式： 打开network
            1. 检查headers中请求地址与请求方式是否与接口文档中相同
            2. 检查payload，是否正确的传递参数 ，
            参数名是否与接口文档相同？
            3. 检查preview响应结果。
            import qs from 'qs';
            如果仍然不成功，看看是否有 qs.stringify()  
        */


        this.isShowCount=true
        let timer = setInterval(()=> {
            this.count--;
            if(this.count == 0) {
                //停止定时器
                clearInterval(timer)
                this.count = 5;
                this.isShowCount = false;
            }
        },1000)
        },
        // 连续点击bug
        // 原因:连续点频繁的触发@click,只需要触发一次就能解决
        // 解决:增加多一个按钮专门显示数字,不绑定事件



        // 登录方法
        submitFn() {
            // 判断滑块验证码
            if(this.msg=="向右活动"||this.msg=="再试一次") {
                alert("请重新滑块验证码")
                return;
            }
            alert("登录成功")
        },
    },
    
}
</script>

<style lang="less" scoped>
    
.modal {
    width:100%;
    height: 100%;
    position:fixed;
    top: 0;
    left: 0;
    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }
    .loginbox {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        background: url("../assets/img/login-box-bg.png");
         .close{
            position: absolute;
            right: 55px;
            top: 10px;
            width: 22px;
            height: 22px;
            background: url("../assets/img/close.png");
         }


         .nav {
            margin-top: 45px;
            text-align: center;
            font-size: 18px;
            a {
                text-decoration: none;
                color: black;
                &.active {
                    color: blue;
                }
            }
         }

         .content {
            width: 350px;
            // background-color: #cfc;
            margin: 10px auto;
            .phoneLogin {
                .row {
                    display: flex;
                    margin-bottom: 20px;
                    input {
                        flex: 1;
                        height: 50px;
                        text-indent: 1em;
                        outline: none;
                    }
                    .btn {
                        background: #0a328e;
                        color: #fff;
                        border: none;
                    }
                    .btncode {
                        width: 80px;
                        margin-left:10px,
                        
                    }
                    .btnlogin {
                        height: 50px;
                        flex: 1;
                    }
                }
            }
         }
    }

    /deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
    
}


</style>